<template>
  <div>
    <br />
    <div>
      <el-descriptions
        title="欢迎来到个人信息中心"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="账号">{{ username }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ name }}</el-descriptions-item>
        <el-descriptions-item label="权限" :span="2">
          <el-tag size="small" v-if="this.roles[0] === 'admin'">管理员</el-tag>
          <el-tag size="small" v-if="this.roles[0] === 'housemaster'">宿管</el-tag>
          <el-tag size="small" v-if="this.roles[0] === 'student'">学生</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="个人介绍">
          {{ introduction }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <br />
    <div>
      <el-row>
        <el-button type="primary" @click="updateUser">修改密码</el-button>
        <el-button type="success" @click="updateInfo">修改个人信息</el-button>
        <el-button type="warning" @click="updatePortrait"
          >修改头像</el-button
        >
        <!-- <el-button type="warning" @click="test">test</el-button> -->
      </el-row>
    </div>
    <updateUser ref="updateUserShow" />
    <updateInfo ref="updateInfoShow" />
    <updatePortrait ref="updatePortraitShow" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import updateUser from "./updateUser";
import updateInfo from "./updateInfo";
import updatePortrait from "./updatePortrait";
export default {
  components: { updateUser, updateInfo, updatePortrait },
  // name: "",
  computed: {
    ...mapGetters(["name"]),
    ...mapGetters(["introduction"]),
    ...mapGetters(["username"]),
    ...mapGetters(["roles"]),
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      // role:this.roles[0]
    };
  },
  methods: {
    test() {
      console.log(this.avatar);
    },
    updateUser() {
      var val = this.username;
      this.$refs.updateUserShow.open(val); // 执行子组件的方法打开弹窗
    },
    updateInfo() {
      this.$refs.updateInfoShow.open(
        this.username,
        this.name,
        this.introduction
      );
    },
    updatePortrait() {
      var val1=this.avatar;
      var val2=this.username;
      this.$refs.updatePortraitShow.open(val1,val2);
    },
  },
};
</script>